import { ReactNode, useEffect, useState } from "react"
import './index.less'
interface ScanProps {
    scaning?: boolean
    children: React.ReactNode
    color?:string
    direction?:'horizontal'|'vertical'
    once?:boolean
    style?:React.CSSProperties
}
const Scan = ({ style,scaning=true,once, children,color,direction='horizontal'}: ScanProps) => {
    const [scan,setScan] = useState(scaning);
    // const [show,setShow] = useState(true)
    useEffect(()=>{
         if(once){
           setTimeout(()=>{
                setScan(false);
           },760) 
         }
    },[once])
    useEffect(()=>{
      setScan(scaning)
    },[scaning])
    return <div style={style} className={`scan-container `}>
        <div className={`scan-body scan-${direction}`}>
        {children}
        {
            scan ? <div className="scan-line">
                <span style={{
                    background:color,
                  
                    boxShadow: `0 0 70px 20px ${color}`
                }} className="scan-line-block"/>
            </div> : null
        }
        </div>
       
    </div>
}
export default Scan